<template>
    <div class="box">
        <div v-if="onlyShow" class="mark"></div>
        <condition-group ref="conditionGroup" v-model:modelValue="filterConditionTree">
            <template #buttonGroup>
                <div :class="btnGroupClass">
                    <!-- 添加条件过滤的按钮 -->
                    <add-condition-button
                        class="condition-button"
                        :button-type="t('condition')"
                        @click="handleAddCondition"
                    />
                </div>
            </template>
            <template #expressionSolt="{ expression, node, parentNode }">
                <!-- 条件过滤 -->
                <condition-config
                    v-if="expression.filterType === 'CONDITION'"
                    :condition-config="expression.filterCondition"
                    :field-list="fieldList"
                    @selectCondition="handleSelectConditionNode(node, parentNode)"
                />
            </template>
        </condition-group>
    </div>
</template>

<script lang="ts">
    import { defineComponent, computed, ref, watch } from 'vue'
    import { useI18n } from 'vue-i18n'
    import { isEqual, cloneDeep } from 'lodash-es'
    import { handleCheckFilterConditionTree } from './conditionFormConfig'
    import ConditionGroup from './conditionGroup/index'
    import AddConditionButton from './conditionGroup/AddConditionButton'
    import ConditionConfig from './conditionConfig.vue'
    export default defineComponent({
        components: {
            ConditionGroup,
            AddConditionButton,
            ConditionConfig
        },
        props: {
            fieldList: {
                type: Array,
                default: () => []
            },
            // 等同于filterConditionTree, 目的是用于数据回填
            condition: {
                type: Object,
                default: () => ({})
            },
            // 仅仅用于数据回填,展示
            onlyShow: {
                type: Boolean,
                default: false
            },
            // 是否展示公式功能按钮
            showFormulaBtn: {
                type: Boolean,
                default: false
            }
        },

        setup(props) {
            const { t } = useI18n()

            const conditionGroup = ref()

            const filterConditionTree = ref({})

            watch(
                () => props.condition,
                () => {
                    if (!isEqual(props.condition, filterConditionTree.value)) {
                        filterConditionTree.value = cloneDeep(props.condition)
                    }
                },
                {
                    immediate: true,
                    deep: true
                }
            )

            const btnGroupClass = computed(() => {
                return props.onlyShow ? 'hide' : 'condition-button-group'
            })

            // 添加条件过滤
            function handleAddCondition(operator) {
                conditionGroup.value.handleAddCondition(operator, {
                    filterType: 'CONDITION',
                    filterCondition: {
                        filterColumnName: '',
                        type: '',
                        conditionType: '',
                        dateFormat: 'yyyy-MM-dd',
                        value: null
                    }
                })
            }

            // 选中条件节点
            function handleSelectConditionNode(currentNode, parentNode) {
                conditionGroup.value.handleSelectCondition(currentNode, parentNode)
            }

            /**
             * 组件是否填写完整的验证
             */
            function handleValidate() {
                if (!handleCheckFilterConditionTree(filterConditionTree.value)) {
                    return Promise.reject()
                }
                return Promise.resolve(filterConditionTree.value)
            }

            return {
                btnGroupClass,
                filterConditionTree,

                conditionGroup,

                t,
                handleAddCondition,
                handleSelectConditionNode,

                // 暴露给组件外校验过滤条件是否合法的方法
                handleValidate
            }
        }
    })
</script>

<style lang="less" scoped>
    .box {
        position: relative;
        overflow: hidden;

        .mark {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 99;
            opacity: 0;
        }
    }

    .condition-button-group {
        display: flex;
        margin-bottom: 16px;
    }

    .condition-button:not(:first-child) {
        margin-left: 24px;
    }

    .hide {
        display: none;
    }
</style>

<i18n>
zh-CN:
  condition: '条件'
</i18n>
